<template>
    <view class="body-view1"></view>

    <view
        class="header"
        :style="{
            background: `rgba(178, 250, 205,${opacityNum})`,
            top: systemInfo.statusBarHeight + 'px',
        }"
        :class="{ addTitle: opacityNum > 0 }"
    >
        <image src="/static/center/back.png" @tap="goBack" class="back"></image>
        <text class="title_name">{{ titleText }}</text>
        <view class="right_box">
            <image
                v-if="userId !== userData.id"
                src="/static/center/dian.png"
                class="dian"
                @tap="goMore"
            ></image>
        </view>
    </view>

    <scroll-view
        :scroll-y="true"
        @scroll="onScroll"
        @scrolltolower="scrolltolower"
        class="person_center"
        :scroll-top="scroll_top"
        :scroll-with-animation="true"
    >
        <view class="center-dom">
            <view class="banner"> </view>
            <view
                class="msg"
                :style="{
                    paddingTop: `calc(100rpx + ${systemInfo.statusBarHeight}px)`,
                }"
            >
                <view class="user">
                    <view class="user-info">
                        <userhead
                            width="140"
                            height="140"
                            :saveKey="userDetail.id"
                            :prview="true"
                            :isVip="userDetail.isVip"
                            :src="userDetail.photo"
                        />
                        <!-- <view class="user-img">
                            <cacheimg class="img" :prview="true" :saveKey="userDetail.id" :src="userDetail.photo || '/static/head.jpg'"></cacheimg>

                            <image v-if="userDetail.isVip===2" class="vipimg" src="/static/svip.png"></image>
                            <image v-if="userDetail.isVip===1" class="vipimg" src="/static/vip.png"></image>
                        </view> -->
                        <view class="user-name d-flex d-c">
                            <view class="name-age d-flex a-center">
                                <sexage
                                    style="margin-right: 10rpx"
                                    :sex="userDetail.sex"
                                    :age="userDetail.age"
                                />
                                <view
                                    class="name"
                                    :class="{ isVip: userDetail.isVip }"
                                    >{{ remark || userDetail.nickName }}</view
                                >
                            </view>
							<view v-if="remark" class="user-id" style="padding:2rpx 0;">
								原昵称:
								{{
								    userDetail.nickName
								}}
							</view>
                            <view class="user-id">
								
                                ID:
                                {{
                                    isAdd ? userDetail.id : "********"
                                }}
                            </view>
                            <view class="d-flex a-center" style="gap: 10rpx;padding-top:2rpx">
                                <view
                                    class="real_name"
                                    :class="{ real: userDetail.realName }"
                                    >{{
                                        userDetail.realName
                                            ? "已实名"
                                            : "未实名"
                                    }}</view
                                >
								<!--
                                <view class="user-id"
                                    >IP属地: {{ ipArea }}</view
                                >
								-->
                            </view>
                        </view>

                        <view
                            v-if="!isInteraction && isAdd"
                            v-show="checked && !isFriend && !inBlack && !isSelf"
                            class="add d-flex a-center j-center"
                            @tap="goApplayForFriend"
                        >
                            添加好友
                        </view>

                        <view
                            v-show="checked && isFriend"
                            class="liao-user"
                            @tap="contactUser"
                        >
                            <i class="icon icon-liaotian mes"></i>
                            聊天
                        </view>
                    </view>
                    <view class="qianming"
                        >签名：{{
                            userDetail.signature
                                ? userDetail.signature
                                : "这个胖友很懒，什么也没留下..."
                        }}
                    </view>

                    <view class="inBlack d-flex a-center" v-if="inBlack">
                        <i
                            class="tmicon tmicon-waiting error"
                            style="margin-right: 10rpx"
                        ></i>
                        <text style="color: #999"
                            >已添加至黑名单，你将不再收到对方的消息</text
                        >
                    </view>
                </view>
				<!--
                <view class="user-num">
                    <view class="num">
                        <view class="num-top">
                            {{ fromNowDay(userDetail.createTime) }}天
                        </view>
                        <view class="num-bom"> 来轻盈 </view>
                    </view>
                    <view class="num">
                        <view class="num-top">
                            {{
                                userDetail.leadCount
                                    ? userDetail.leadCount
                                    : "暂无"
                            }}
                            <i
                                v-if="userDetail.leadCount"
                                class="icon icon-xiaosanjiao sanjiao"
                            ></i>
                        </view>
                        <view class="num-bom"> 累计带领/人 </view>
                    </view>
                    <view class="num" @click="onLinkrate">
                        <view class="num-top">
                            {{
                                userDetail.appraiseCount
                                    ? userDetail.appraiseCount
                                    : "暂无"
                            }}
                            <i
                                v-if="userDetail.appraiseCount"
                                class="icon icon-xiaosanjiao sanjiao"
                            ></i>
                        </view>
                        <view class="num-bom"> 评价/条 </view>
                    </view>
                </view>
				-->
				<!--
                <view class="quanzi">
                    <view
                        class="quanzhu_title d-flex a-center j-between"
                        @tap="goPersonGroup"
                    >
                        <view class="q_name">
                            <text class="bj"></text>
                            <text class="name">{{
                                isSelf ? "我的群" : "他的群"
                            }}</text>
                        </view>
                        <view
                            class="time"
                            v-show="
                                userDetail.groups &&
                                userDetail.userHaveGroups.length > 3
                            "
                        >
                            <text>更多</text>
                            <image
                                src="/static/center/more.png"
                                class="more"
                            ></image>
                        </view>
                    </view>

                    <view
                        v-if="!userDetail.groups || !userDetail.groups.length"
                        class="d-flex a-center j-center"
                        style="
                            width: 100%;
                            height: 70rpx;
                            font-size: 28rpx;
                            color: #999;
                        "
                    >
                        他还未加入任何群~
                    </view>

                    <view
                        class="user-list"
                        v-for="item in userDetail.groups"
                        @tap="goGroupDetail(item.groupId)"
                    >
                        <cacheimg
                            :saveKey="item.groupId"
                            :src="item.faceUrl"
                            :lazy-load="true"
                            class="touxiang"
                        ></cacheimg>
                        <text class="name"> {{ item.name }}</text>
                    </view>
                </view>
				-->
                <view class="dongtai">
                    <view class="quanzhu_title d-flex a-center j-between">
                        <view class="q_name">
                            <text class="bj"></text>
                            <text class="name">动态</text>
                        </view>
                        <!-- <view class="time">
                            <text>更多</text>
                            <image
                                src="/static/center/more.png"
                                class="more"
                            ></image>
                        </view> -->
                    </view>
					<template v-if="isFriend">
						<view v-if="!trends.length" class="nodata1">
						    <image
						        class="nodata-img"
						        src="/static/img/nodata.png"
						        alt=""
						    />
						
						    <text class="text">尚未发布动态</text>
						</view>
						
						<view
						    v-if="trends.length"
						    class="trend_card"
						    v-for="(item, index) in trends"
						    @tap="goTrendDetail(item.id)"
						>
						    <view class="psr user_msg d-flex a-center">
						        <userhead
						            width="100"
						            height="100"
						            :saveKey="item.userId"
						            :isVip="item.isVip"
						            :src="item.photo"
						        />
						        <view class="d-flex d-c msg1">
						            <view class="u_name">{{ item.nickName }}</view>
						            <sexage
						                class="sexage1"
						                :sex="item.sex"
						                :age="item.age"
						            />
						        </view>
						
						        <view class="status_box d-flex a-center">
						            <i
						                class="icon"
						                :class="[getStatusIcon(item.status)]"
						            ></i>
						            <view v-if="item.isTop" class="isTop"
						                >置顶</view
						            >
						        </view>
						    </view>
						
						    <view class="trend">
						        <view class="title2">
						            <text class="text">{{ item.content }}</text>
						        </view>
						
						        <view
						            v-if="item.imgs.length"
						            class="imgs d-flex d-r"
						        >
									<image
									    v-for="(img, imgIndex) in item.imgs"
									    @tap.stop="previewImage(item.imgs,imgIndex)"
									    class="img"
									    :class="[getImgClass(item.imgs)]"
									    :src="img"
									    mode="aspectFill"
									/>
									<!--
						            <image
						                v-for="(img, imgIndex) in item.imgs"
						                :id="`img${item.id}${imgIndex}`"
						                @tap.stop="
						                    previewImage(
						                        `img${item.id}`,
						                        imgIndex,
						                        imageConvertArray(item.picture)
						                    )
						                "
						                class="img"
						                :class="[getImgClass(item.imgs)]"
						                :src="img"
						                mode="aspectFill"
						            />
									-->
						        </view>
						
						        <view class="desp d-flex d-r a-center">
									<!--
						            <text class="online" v-if="item.isOnline"
						                >当前在线</text
						            >
									-->
						            <text class="text">
										<!--
						                <text
						                    :class="{
						                        online:
						                            calcTimeForShow(item) ===
						                            '刚刚在线',
						                    }"
						                    v-if="!item.isOnline"
						                >
						                    {{ calcTimeForShow(item) }}
						                </text>
										-->
						                <text v-if="item.location"
						                    >{{ item.location }}</text
						                >
						            </text>
						        </view>
						
						        <view class="controls d-flex a-center j-between">
						            <view class="d-flex a-center">
						                <image
						                    v-if="!item.isLike"
						                    @tap.stop="ToggleLikeTrend(item)"
						                    class="icon"
						                    src="/static/image/aixin1.png"
						                    mode=""
						                />
						                <image
						                    v-if="item.isLike"
						                    @tap.stop="ToggleLikeTrend(item)"
						                    class="icon"
						                    src="/static/image/diet-collect-yes.png"
						                    mode=""
						                />
						                <text class="text">{{
						                    item.likeCount ? item.likeCount : "赞"
						                }}</text>
						                <image
						                    class="icon"
						                    style="margin-left: 20rpx"
						                    src="/static/image/lianxi1.png"
						                    mode=""
						                />
						                <text class="text">{{
						                    item.appraiseCount
						                        ? item.appraiseCount
						                        : "评论"
						                }}</text>
						            </view>
						
						            <!-- <view v-if="userData.id === item.userId" class="more d-flex a-center" @tap.stop="showControl(item)">
						            <view class="dian"></view>
						            <view class="dian"></view>
						        </view> -->
						        </view>
						    </view>
						
						    <view
						        v-if="userData.id !== item.userId"
						        class="more d-flex d-r a-center"
						        @tap.stop="showjubaopopup(item)"
						    >
						        <view class="dian dian1"></view>
						        <view class="dian"></view>
						    </view>
						    <view
						        v-if="userData.id === item.userId"
						        class="more d-flex d-r a-center"
						        @tap.stop="showControl(item)"
						    >
						        <view class="dian dian1"></view>
						        <view class="dian"></view>
						    </view>
						</view>
					</template>
					<template v-else>
						<view class="nodata1">
						    <image
						        class="nodata-img"
						        src="/static/img/nodata.png"
						        alt=""
						    />
						
						    <text class="text">您还不是他的好友，无法查看动态</text>
						</view>
					</template>
                </view>

                <view class="heightBox"></view>
            </view>
        </view>
        <tm-action-menu v-model="showmenu" :list="list"></tm-action-menu>

        <uni-popup
            ref="popup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="popup_box">
                <view class="controls d-flex">
                    <view
                        class="control d-flex d-c a-center"
                        @tap="toggleIsTop"
                    >
                        <i class="icon icon-zhiding1"></i>
                        <view class="text">
                            {{ currentTrend.isTop ? "取消置顶" : "置顶" }}
                        </view>
                    </view>
                    <view
                        class="control d-flex d-c a-center"
                        @tap="goTrendConfig"
                    >
                        <i class="icon icon-zhanshifanwei"></i>
                        <view class="text"> 修改展示范围 </view>
                    </view>
                    <view class="control d-flex d-c a-center" @tap="showDel">
                        <i class="icon icon-shanchu1"></i>
                        <view class="text"> 删除 </view>
                    </view>
                </view>
                <view
                    style="height: 20rpx; width: 750rpx; background: #f5f5f5"
                ></view>
                <view class="bottom_button d-flex a-center j-center">
                    <text class="text">取消</text>
                </view>
                <view class="heightBox"></view>
            </view>
        </uni-popup>

        <uni-popup
            ref="delPopup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="sys-confirm-content">
                <view class="confirm-content-title">确认删除该动态?</view>
                <!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
                <view
                    @tap="DelTrend"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="delPopup.close"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>
        </uni-popup>

        <uni-popup
            ref="jubaopopup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="popup_box">
                <view class="controls d-flex d-r">
                    <!-- <view class="control d-flex d-c a-center" @tap="pinbi">
                        <i class="icon icon-pingbigaidongtai"></i>
                        <text class="text"> 屏蔽 </text>
                    </view> -->
                    <view
                        class="control d-flex d-c a-center"
                        @tap="gojubaodongtai"
                    >
                        <i class="icon icon-jubao"></i>
                        <text class="text"> 举报 </text>
                    </view>
                    <view class="control d-flex d-c a-center" @tap="lahei">
                        <i class="icon icon-laheizuozhe"></i>
                        <text class="text"> 拉黑作者</text>
                    </view>
                </view>
                <view
                    style="height: 20rpx; width: 750rpx; background: #f5f5f5"
                ></view>
                <view
                    class="bottom_button d-flex a-center j-center"
                    @tap="jubaopopup.close()"
                >
                    <text class="text">取消</text>
                </view>
                <view class="heightBox"></view>
            </view>
        </uni-popup>

        <uni-popup
            ref="popup1"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >
            <view class="sys-confirm-content">
                <view class="confirm-content-title">
                    <text class="text">
                        {{ actionText }}
                    </text>
                </view>
                <!-- <view class="confirm-content-tip">
					<text class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</text>
				</view> -->
                <view
                    class="content-button d-flex a-center j-center button-confirm"
                    style="color: #1dc691"
                    @tap="submitJubao"
                >
                    <text class="text">确认</text>
                </view>
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="content-button d-flex a-center j-center"
                    style="color: #999999"
                    @tap="popup1.close()"
                >
                    <text class="text">取消</text>
                </view>

                <view class="heightBox"></view>
            </view>
        </uni-popup>

        <imagePreview ref="preview"></imagePreview>
    </scroll-view>

    <view
            style="width:750rpx; position:fixed;z-index:200;top:0;left:0;"
            :style="{
                height: systemInfo.statusBarHeight + 'px',
                background: `rgba(178, 250, 205,${opacityNum})`,
            }"
        ></view>
</template>
<script setup lang="ts">
import { ref, reactive, computed, nextTick } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onUnload,
    onLoad,
    onPageScroll,
    onReachBottom,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    getUserDetail1,
    getUserSecret,
    getUserTrends,
    likeTrend,
    unlikeTrend,
    updateTrend,
    delTrend,
    pinbilahei,
} from "@/api/api";
import {
    handleJumpToChat,
    checkFriend,
    getUserProfile,
    addFriend,
    getBlacklist,
    getFriendProfile,
    addToBlacklist,
} from "@/hooks/imHooks";
import cacheimg from "@/components/cacheimg.vue";
import { userData as userDataStore } from "@/store/userData";
import sexage from "@/components/sexage.vue";
import userhead from "@/components/userhead.vue";
import imagePreview from "@/components/imagePreview.vue";
import { imageConvertArray, getHDImages } from "@/utils/format";
import { imStore } from "@/store/imStore";
const jubaopopup = ref();
const popup1 = ref();
const jubaoItem:any = ref({});
const action = ref("");
const scroll_top = ref(1);

const actionText = computed(() => {
    if (action.value === "pinbi") {
        return "确认屏蔽该动态?";
    }
    if (action.value === "lahei") {
        return "确认拉黑该用户?";
    }
});

const gojubaodongtai = () => {
    popup1.value.close();
    uni.navigateTo({
        url: `/pages/complaint/complaint?trendId=${jubaoItem.value.id}&target=userFriendCircle`,
    });
};

const submitJubao = async () => {
    const { id, userId } = jubaoItem.value;
    let params:any = {
        userId: userData.id,
    };
    if (action.value === "pinbi") {
        params.typeKey = 1;
        params.typeValue = id;
    }
    if (action.value === "lahei") {
        params.typeKey = 2;
        params.typeValue = userId;
    }

    const res:any = await pinbilahei(params);

    const { flag } = res;

    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "操作失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    if (action.value === "pinbi") {
        uni.showToast({
            icon: "none",
            title: "已屏蔽该动态",
            duration: 3000,
        });
    }

    if (action.value === "lahei") {
        await addToBlacklist([userId]);
        uni.showToast({
            icon: "none",
            title: "已拉黑用户",
            duration: 3000,
        });
    }

    refresh();
    jubaoItem.value = {};
    popup1.value.close();
};

const showjubaopopup = (item:any) => {
    jubaoItem.value = item;
    jubaopopup.value.open();
};

const pinbi = () => {
    action.value = "pinbi";
    jubaopopup.value.close();
    popup1.value.open();
};
const lahei = () => {
    if (jubaoItem.value.userId === userData.id) {
        uni.showToast({
            icon: "none",
            title: "无法拉黑自己",
            duration: 1500,
        });
        return;
    }
    action.value = "lahei";
    jubaopopup.value.close();
    popup1.value.open();
};

const delPopup = ref();
const popup = ref();
const currentTrend:any = ref({});
const showControl = (trend: any) => {
    currentTrend.value = trend;
    popup.value.open();
};

const toggleIsTop = async () => {
    popup.value.close();
    const res:any = await updateTrend({
        id: currentTrend.value.id,
        isTop: currentTrend.value.isTop ? 0 : 1,
    });
    const { flag } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "success",
        title: currentTrend.value.isTop ? "已取消置顶" : "已置顶",
        duration: 1500,
    });

    refresh();
};

const goTrendConfig = () => {
    const { id, status } = currentTrend.value;
    popup.value.close();
    uni.navigateTo({
        url: `/pages/trends/trendConfig?type=edit&status=${status}&id=${id}`,
    });
};

const showDel = () => {
    popup.value.close();
    setTimeout(() => {
        delPopup.value.open();
    }, 300);
};

const DelTrend = async () => {
    delPopup.value.close();
    const res:any = await delTrend({ id: currentTrend.value.id });
    const { flag } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }
    const index = trends.value.findIndex(
        (item:any) => item.id === currentTrend.value.id
    );
    trends.value.splice(index, 1);
    pageParam.total -= 1;

    uni.showToast({
        icon: "success",
        title: "已删除",
        duration: 1500,
    });
};

const getStatusIcon = computed(() => (num: any) => {
    if (num === 1) {
        return "icon-gongkai";
    }
    if (num === 2) {
        return "icon-jinhaoyou";
    }
    if (num === 3) {
        return "icon-quanzi";
    }
    if (num === 4) {
        return "icon-jinzijikejian";
    }
});

const statusEditChange = (obj: any) => {
    const { id, status } = obj;
    trends.value.forEach((trend:any) => {
        if (trend.id === id) {
            trend.status = status;
        }
    });
};

const previewImage = (imgs:any,index:number) => {
	if(imgs){
		const systemInfo: any = systemInfoStore();
		if(systemInfo.platform==='android'){
			const IM_STORE: any = imStore();
			IM_STORE.setReset(false)
		}
		uni.previewImage({
		  current: index,
		  urls: imgs,
		  indicator: 'number'
		});
	}
}
/*
const preview = ref();
const previewImage = (idPre: string, index: number, urls: any) => {
	
    uni.createSelectorQuery()
        .select(`#${idPre}${index}`)
        .boundingClientRect()
        .exec((ret) => {
			
			console.log(getHDImages(urls))
            let params = {
                idPre,
                startInfo: [ret[0]], //图片的初始大小与位置
                index: index, //当前id
                urls: getHDImages(urls), //预览集合图片地址
            };
            preview.value.open(params);
        });
};
*/
const msg: any = ref();
const systemInfo: any = systemInfoStore();
const userData: any = userDataStore();
const showmenu: any = ref(false);
const list: any = ref([
    { text: "回复", id: "1" },
    { text: "删除", id: "2" },
]);
/*
const ipArea = computed(() => {
    if (userDetail.value.province && !userDetail.value.city) {
        return userDetail.value.province.replace("省", "");
    }
    if (userDetail.value.city && !userDetail.value.province) {
        return userDetail.value.city.replace("市", "");
    }
    if (userDetail.value.city && userDetail.value.province) {
        return `${userDetail.value.province.replace("省", "")}`;
        //return `${userDetail.value.province}${userDetail.value.city}`
    }
    return "未知";
});
*/
const opacityNum: any = ref(0); //响应式
/*
const onUpdateMesages = () => {};
// 显示底部选项卡
const onShowBottomPop = () => {
    showmenu.value = true;
};
*/
onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if (res.scrollTop === 0) {
        backTop();
        setTimeout(() => {
            uni.pageScrollTo({ scrollTop: 100 });
        }, 100);
    }
    // if (scrollTop >= 0) {
    //     // 导航条颜色透明渐变
    //     if (scrollTop <= 20) {
    //         opacityNum.value = 0;
    //     } else if (20 < scrollTop && scrollTop <= 100) {
    //         opacityNum.value = scrollTop / 100;
    //     } else if (scrollTop > 100) {
    //         opacityNum.value = 1;
    //     }
    // }
});

const backTop = () => {
    scroll_top.value = 1;
    nextTick(() => {
        scroll_top.value = 0;
    });
};

const onScroll = (e: any) => {
    const scrollTop = e.detail.scrollTop;
    if (scrollTop >= 0) {
        // 导航条颜色透明渐变
        if (scrollTop <= 20) {
            opacityNum.value = 0;
        } else if (20 < scrollTop && scrollTop <= 100) {
            opacityNum.value = scrollTop / 100;
        } else if (scrollTop > 100) {
            opacityNum.value = 1;
        }
    }

    // if (e.detail.scrollTop >= 0) {
    //     // 导航条颜色透明渐变
    //     if (e.detail.scrollTop <= 20) {
    //         opacityNum.value = 0;
    //     } else if (20 < e.detail.scrollTop && e.detail.scrollTop <= 100) {
    //         opacityNum.value = e.detail.scrollTop / 100;
    //     } else if (e.detail.scrollTop > 100) {
    //         opacityNum.value = 1;
    //     }
    // }

    // if (e.detail.scrollTop < 0) {
    //     scale.value = 1 - e.detail.scrollTop / 150;
    // } else {
    //     scale.value = 1;
    // }
};

const goMore = async () => {
    uni.navigateTo({
        url: `/pages/personalCenter/more?userId=${userDetail.value.id}&groupName=${userDetail.value.nickName}&target=group`,
    });
};
/*
const goPersonGroup = async () => {
    uni.navigateTo({
        url: `/pages/discover/personGroup?userId=${userDetail.value.id}`,
    });
};
*/
const userDetail:any = ref({});

const getDetail = async (userId: string) => {
    const res: any = await getUserDetail1({ id: userId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取胖友详情失败",
            duration: 1500,
        });

        return;
    }

    if (data.userHaveGroups && data.userHaveGroups.length) {
        data.groups = data.userHaveGroups.filter((item, index:number) => {
            return index < 3;
        });
    } else {
        data.groups = [];
    }

    userDetail.value = data;
};
/*
const goGroupDetail = (groupId: string) => {
    uni.navigateTo({
        url: `/pages/discover/discoverDetail?groupId=${groupId}`,
    });
};
*/
const goBack = () => {
    uni.navigateBack();
};

const contactUser = () => {
    handleJumpToChat(`C2C${userDetail.value.id}`);
};
/*
const fromNowDay = (time: string) => {
    if (!time) {
        return "--";
    }
    let now = new Date().getTime();
    let createTime = new Date(time).getTime();
    let subTime = now - createTime;
    return Math.ceil(subTime / 86400000);
};
*/
const checked = ref(false);
const isFriend = ref(false);
const allowType = ref("");

const isSelf = computed(() => {
    return userData.id === userId.value;
});

const check = async (userId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            check(userId);
        }, 200);
        return;
    }

    const res: any = await checkFriend([userId]);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "检查胖友关系失败~",
            duration: 1500,
        });
        return;
    }
    checked.value = true;
    if (
        data.successUserIDList[0].relation ===
            uni.$TIM.TYPES.SNS_TYPE_BOTH_WAY ||
        data.successUserIDList[0].relation === uni.$TIM.TYPES.SNS_TYPE_A_WITH_B
    ) {
        isFriend.value = true;
    } else {
        isFriend.value = false;
    }
    refresh();
};

const handleAddFirend = async () => {
    const obj = {
        userId: userDetail.value.id,
        wording: "",
        remark: "",
        source: "Preview",
    };
    const res: any = await addFriend(obj);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "申请添加好友失败，请稍后再试",
            duration: 1500,
        });
        return;
    }
    uni.showToast({
        icon: "none",
        title: "已成功添加对方为好友~",
        duration: 1500,
    });
};

const inBlack = ref(false);

const GetBlacklist = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetBlacklist();
        }, 200);
        return;
    }

    const res: any = await getBlacklist();

    const { code, data } = res;

    if (code !== 0) {
        return;
    }

    if (data.includes(userId.value)) {
        inBlack.value = true;
    } else {
        inBlack.value = false;
    }
};

const checkAddFriend = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            checkAddFriend();
        }, 200);
        return;
    }

    const res1: any = await getUserProfile([userId.value]);

    console.log(res1.data[0].allowType);
    // AllowType_Type_AllowAny
    // AllowType_Type_DenyAny
    if (res1.code === 0) {
        allowType.value = res1.data[0].allowType;
    }

    if (allowType.value === "AllowType_Type_AllowAny") {
        handleAddFirend();
    } else if (allowType.value === "AllowType_Type_DenyAny") {
        uni.showToast({
            icon: "none",
            title: "对方不允许任何人添加其为好友",
            duration: 1500,
        });
    } else {
        goApplayForFriend();
    }
};

const remark = ref("");

const getFriend = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            getFriend();
        }, 200);
        return;
    }

    const res: any = await getFriendProfile([userId.value]);

    if (res.code === 0 && res.data.friendList.length) {
        remark.value = res.data.friendList[0].remark;
    }
};

const goApplayForFriend = () => {
    if (userDetail.value.id === userData.id) {
        uni.showToast({
            icon: "none",
            title: "无法添加自己为好友",
            duration: 1500,
        });
        return;
    }

    uni.navigateTo({
        url: `/pages/addFriend/applyforFriend?userId=${userDetail.value.id}&from=discover`,
    });
};

// onShow(()=>{
//     if (userDetail.value.id) {
//         check(userDetail.value.id);
//     }
// })
const userId = ref("");

const handleFriendUpdate = () => {
    check(userId.value);
};

onShow(() => {
    getFriend();
    GetBlacklist();
});

const titleText = ref("胖友详情");

const isInteraction = ref(false);

const GetUserSecret = async () => {
    const params = { userId: userId.value };
    const res: any = await getUserSecret(params);
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取添加方式失败",
            duration: 1500,
        });
        return;
    }

    console.log("GetUserSecret");
    console.log("GetUserSecret");
    console.log("GetUserSecret");
    console.log(res);

    isInteraction.value = !data.isGroup;
};

const trendIsLikeChange = (item:any) => {
    let _index = trends.value.findIndex((trend:any, index) => {
        if (trend.id === item.id) {
            return true;
        }
    });
    if (_index !== -1) {
        trends.value[_index] = item;
    }
};
const isAdd = ref(false)//是否可以加好友
onLoad(async (option: any) => {
    setTimeout(() => {
        uni.pageScrollTo({ scrollTop: 100 });
    }, 100);
	//console.log(option.isAdd == null)
	if(option.isAdd == null){
		isAdd.value = true
	}else{
		if(option.isAdd == 'false')isAdd.value = false
		if(option.isAdd == 'true')isAdd.value = true
	}
	//console.log(option.isAdd)
    userId.value = option.userId;
    if (option.type === "quanzhu") {
        titleText.value = "群主详情";
    }
    if (userData.id === userId.value) {
        titleText.value = "我的主页";
    }
	/*
    if (option.isInteraction) {
        isInteraction.value = !!Number(option.isInteraction);
		if(isInteraction.value) {
			if(option.isAdd){
				
			}
		}
    }
	*/
    if (option.from === "group" && !Number(option.isInteraction)) {
        GetUserSecret();
    }

    uni.$on("friendUpdate", () => {
        check(option.userId);
    });
    uni.$on("trendIsLikeChange", trendIsLikeChange);
    if (option.userId) {
        getDetail(option.userId);
        check(option.userId);
    }

    uni.$on("statusEditChange", statusEditChange);
});

onUnload(async () => {
    uni.$off("friendUpdate", handleFriendUpdate);
    uni.$off("statusEditChange", statusEditChange);
    uni.$off("trendIsLikeChange", trendIsLikeChange);
});
//  跳转评价页面
const onLinkrate = () => {
    uni.navigateTo({
        url: `/pages/rate/rate?userId=${userId.value}`,
    });
};

//评论

const pageParam = reactive({
    page: 1,
    rows: 10,
    total: 0,
});

const trends:any = ref([]);

const fromNow = (time:any) => {
    if (!time) {
        return "--";
    }
    return uni.$tm.u.getDateToNewData(time);
};

const calcTimeForShow = computed(() => (item: any) => {
    const { eventTime, createTime } = item;
    const currentTime = new Date().getTime();
    let showUserTime = false;
    let subTime = currentTime - eventTime;
    if (subTime < 172800000) {
        showUserTime = true;
    }

    if (showUserTime) {
        if (subTime < 1200000) {
            return "刚刚在线";
        }
        if (subTime < 3600000) {
            return "最近在线";
        }

        if (3600000 <= subTime && subTime < 86400000) {
            return "今天在线";
        }

        if (86400000 <= subTime && subTime < 172800000) {
            return "昨天在线";
        }
    } else {
        return fromNow(createTime);
    }
});

const refresh = async () => {
    pageParam.page = 1;
    pageParam.total = 0;
    await GetUserTrends().catch(() => {});
};

const GetUserTrends = async () => {
    if (pageParam.total && trends.value.length >= pageParam.total) {
        return;
    }
    const { page, rows } = pageParam;
    const params = {
        userId: userId.value,
        isFriend: isFriend.value ? 1 : 0,
        //userId: userData.id,
        page,
        rows,
    };

    const res:any = await getUserTrends(params);
    const { flag, data } = res;

    pageParam.total = data.total;

    pageParam.page += 1;

    data.list.forEach((item:any) => {
        item.imgs = item.picture.split(",").filter((img:string) => img);
    });

    if (page === 1) {
        trends.value = data.list;
    } else {
        trends.value.push(...data.list);
    }
};

const goTrendDetail = (id:string) => {
    if (!id) {
        return;
    }
    uni.navigateTo({
        url: `/pages/trends/trendDetail?fcmid=${id}`,
    });
};

const ToggleLikeTrend = async (item: any) => {
    const { id, isLike } = item;

    const params = { fcmid: id, userId: userData.id };
    let res:any = null;
    if (isLike) {
        res = await unlikeTrend(params);
    } else {
        res = await likeTrend(params);
    }
    const { flag } = res;
    if (flag === 1) {
        if (isLike) {
            item.likeCount -= 1;
        } else {
            item.likeCount += 1;
        }
        item.isLike = !!!isLike;
    }
};

const getImgClass = computed(() => (arr: any) => {
    if (arr.length === 1) {
        return "L1";
    }
    if (arr.length === 2 || arr.length === 4) {
        return "L2";
    }

    return "L3";
});

const scrolltolower = () => {
    GetUserTrends().catch(() => {});
};
</script>
<style lang="scss" scoped>
.body-view1 {
    width: 750rpx;
    height: calc(100vh + 1px);
}

.nodata1 {
    width: 710rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 50rpx;
    .nodata-img {
        width: 360rpx;
        height: 360rpx;
    }
    .text {
        position: relative;
        z-index: 10;
        margin-top: -80rpx;
        font-size: 28rpx;
        color: #999;
    }
}

.popup_box {
    width: 750rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #fff;
    overflow: hidden;
    .icon {
        font-size: 60rpx;
        color: #666;
    }
    .controls {
        margin-top: 55rpx;
        margin-bottom: 50rpx;
        .control {
            width: 180rpx;
        }
        .text {
            font-size: 28rpx;
            color: #333;
            margin-top: 40rpx;
            text-align: center;
        }
    }
    .bottom_button {
        width: 750rpx;
        height: 100rpx;
        background: #fff;
        .text {
            color: #333;
            font-size: 32rpx;
        }
    }

    .heightBox {
        min-height: 20rpx;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
    }
}

.trend_card {
    position: relative;
    width: 640rpx;
    margin: 20rpx auto;
    padding: 20rpx 0rpx;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;

    .more {
        position: absolute;
        bottom: 40rpx;
        right: 0rpx;
        width: 60rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 6rpx;
        justify-content: center;
        gap: 10rpx;
        &:active {
            opacity: 0.7;
        }
        .dian {
            width: 8rpx;
            height: 8rpx;
            background: #999;
            border-radius: 4rpx;
        }
    }

    &:last-child {
        border-bottom: none;
    }
    .msg1 {
        margin-left: 20rpx;
    }
    .u_name {
        font-size: 30rpx;
        font-weight: 600;
        color: #666;
        margin-bottom: 10rpx;
    }

    .status_box {
        position: absolute;
        top: 0;
        right: 0;
        color: #ccc;
        .icon {
            font-size: 30rpx;
        }
    }

    .sexage1 {
        align-self: flex-start;
    }

    .trend {
        margin-top: 13rpx;
        .title2 {
            .text {
                font-size: 30rpx;
                color: #333;
                line-height: 42rpx;
            }
        }
        .imgs {
            width: 680rpx;
            margin-top: 15rpx;
            flex-wrap: wrap;
            gap: 20rpx;
            .img {
                width: 200rpx;
                height: 200rpx;
                border-radius: 20rpx;
            }
            .L1 {
                width: 350rpx;
                height: 350rpx;
            }
            .L2 {
                width: 250rpx;
                height: 250rpx;
            }
            .L3 {
                width: 200rpx;
                height: 200rpx;
            }
        }

        .desp {
            margin-top: 10rpx;
            .online {
                font-size: 24rpx;
                color: #1dc691;
            }
            .text {
                font-size: 24rpx;
                color: #999;
            }
        }

        .controls {
            margin-top: 15rpx;
            .icon {
                width: 40rpx;
                height: 40rpx;
            }
            .text {
                font-size: 28rpx;
                color: #999;
                margin-left: 10rpx;
            }

            .more {
                width: 60rpx;
                height: 40rpx;
                background: rgba(0, 0, 0, 0.06);
                border-radius: 6rpx;
                justify-content: center;
                gap: 10rpx;
                .dian {
                    width: 8rpx;
                    height: 8rpx;
                    background: #999;
                    border-radius: 4rpx;
                }
            }
        }
    }
}

.heightBox {
    width: 750rpx;
    height: calc(constant(safe-area-inset-bottom) + 30rpx);
    height: calc(env(safe-area-inset-bottom) + 30rpx);
}

.header {
    width: 750rpx;
    height: 100rpx;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;

    .back,
    .dian {
        width: 48rpx;
        height: 48rpx;
    }

    .title_name {
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
    }
}

.person_center {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 750rpx;
    height: 100vh;

    .head {
        position: relative;
        width: 100rpx;
        height: 100rpx;

        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
        }

        .vip {
            position: absolute;
            width: 81rpx;
            height: 36rpx;
            z-index: 5;
            bottom: -15rpx;
        }
    }

    .center-dom {
        height: auto;

        .msg {
            position: absolute;
            top: 0;
            left: 0;
            width: 750rpx;
            height: 671rpx;
            z-index: 3;

            .addTitle {
                position: fixed !important;
                z-index: 9999;
            }

            .user {
                width: 750rpx;

                .qianming {
                    width: 670rpx;
                    height: 66rpx;
                    margin: 0 auto;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    text-align: left;
                    margin-top: 24rpx;
                }

                .inBlack {
                    margin-top: -10rpx;
                    font-size: 24rpx;
                    text-align: left;
                    padding-left: 34rpx;
                }

                .user-info {
                    width: 670rpx;
                    height: 150rpx;
                    margin: 0 auto;
                    position: relative;

                    display: flex;

                    .add {
                        position: absolute;
                        bottom: 10rpx;
                        right: 0;
                        width: 192rpx;
                        height: 60rpx;
                        background: linear-gradient(
                            270deg,
                            #4ee5c8 0%,
                            #1fc994 100%
                        );
                        border-radius: 40rpx;
                        font-size: 28rpx;
                        color: #fff;

                        &:active {
                            opacity: 0.7;
                        }
                    }

                    .liao-user {
                        position: absolute;
                        bottom: 10rpx;
                        right: 0;
                        width: 192rpx;
                        height: 60rpx;
                        border-radius: 40rpx;
                        border: 2rpx solid #1dc691;
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #1dc691;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .mes {
                            font-size: 40rpx;
                            margin-right: 10rpx;
                        }

                        &:active {
                            opacity: 0.7;
                        }
                    }

                    .user-img {
                        width: 140rpx;
                        height: 140rpx;
                        position: relative;

                        .img {
                            display: block;
                            width: 100%;
                            border-radius: 50%;
                            height: 100%;
                        }

                        .vipimg {
                            width: 97rpx;
                            height: 43rpx;
                            position: absolute;
                            bottom: -12rpx;
                            left: 0;
                            right: 0;
                            margin: auto;
                        }
                    }

                    .user-name {
                        margin-left: 20rpx;
                        justify-content: space-around;

                        .name-age {
                            display: flex;
                            align-items: center;

                            .age {
                                padding: 0 10rpx;
                                height: 30rpx;
                                border-radius: 15rpx;
                                font-size: 24rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #ffffff;
                                line-height: 30rpx;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-right: 10rpx;

                                .icon {
                                    font-size: 30rpx;
                                }

                                &.woman {
                                    background: #ff84cc;
                                }

                                &.man {
                                    background: #8498ff;
                                }
                            }

                            .name {
                                height: 45rpx;
                                font-size: 32rpx;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 600;
                                color: #333;
                                line-height: 45rpx;
                                &.isVip {
                                    color: #f19945;
                                }
                            }
                        }

                        .user-id {
                            height: 33rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                            text-align: left;
                        }

                        .real_name {
                            padding: 2rpx 5rpx;
                            font-size: 18rpx;
                            border: 1px solid #999;
                            border-radius: 6rpx;
                            color: #999;
                            &.real {
                                border: 1px solid $slim-main;
                                color: $slim-main;
                            }
                        }
                    }
                }
            }

            .user-num {
                width: 710rpx;
                height: 160rpx;
                background: #ffffff;
                border-radius: 20rpx;
                margin: 34rpx auto;
                display: flex;
                justify-content: space-around;

                .num {
                    .num-top {
                        font-size: 32rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #1dc691;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 33rpx;
                        height: 34rpx;

                        .sanjiao {
                            font-size: 25rpx;
                            color: #23e2a6;
                        }
                    }

                    .num-bom {
                        margin-top: 16rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }

            .quanzi {
                width: 710rpx;
                background: #ffffff;
                border-radius: 20rpx;
                margin: 20rpx auto;
                padding-bottom: 20rpx;

                .quanzhu_title {
                    padding: 22rpx 30rpx 40rpx 32rpx;

                    .q_name {
                        position: relative;
                        font-size: 34rpx;
                        font-weight: 600;
                        color: #333333;
                        height: 48rpx;
                        box-sizing: border-box;

                        .name {
                            width: 136rpx;
                            z-index: 99;
                            position: relative;
                            left: 0;
                            top: 0;
                        }

                        .bj {
                            width: 136rpx;
                            height: 26rpx;
                            background: linear-gradient(
                                270deg,
                                rgba(73, 243, 210, 0) 0%,
                                #23e2a6 100%
                            );
                            border-radius: 13rpx;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            z-index: 1;
                        }
                    }

                    .time {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;

                        .more {
                            width: 30rpx;
                            height: 30rpx;
                        }
                    }
                }

                .user-list {
                    width: 710rpx;
                    padding: 0 20rpx;

                    height: 120rpx;
                    display: flex;
                    align-items: center;

                    .touxiang {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                        border: 2.5rpx solid #fff;
                        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
                    }

                    .name {
                        font-size: 32rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        margin-left: 20rpx;
                    }
                }
            }

            .dongtai {
                width: 710rpx;
                background: #ffffff;
                border-radius: 20rpx;
                margin: 0 auto;

                .quanzhu_title {
                    padding: 22rpx 30rpx 0 32rpx;

                    .q_name {
                        position: relative;
                        font-size: 34rpx;
                        font-weight: 600;
                        color: #333333;
                        height: 48rpx;
                        box-sizing: border-box;

                        .name {
                            width: 68rpx;
                            z-index: 99;
                            position: relative;
                            left: 0;
                            top: 0;
                        }

                        .bj {
                            width: 68rpx;
                            height: 26rpx;
                            background: linear-gradient(
                                270deg,
                                rgba(73, 243, 210, 0) 0%,
                                #23e2a6 100%
                            );
                            border-radius: 13rpx;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            z-index: 1;
                        }
                    }

                    .time {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;

                        .more {
                            width: 30rpx;
                            height: 30rpx;
                        }
                    }
                }
            }
        }

        .banner {
            width: 750rpx;
            height: 786rpx;
            background: linear-gradient(
                27deg,
                #d6f6fc 0%,
                #eafce1 59%,
                #b2facd 80%
            );
            padding-top: 150rpx;
        }
    }
}
</style>